<template>
	<div id="app">
		<!-- <nav class="app-nav">
			<ul>
				<li v-for="route in routes" :key="route.path">
					<router-link :to="route.path">{{ route.meta.title }}</router-link>
				</li>
			</ul>
		</nav> -->
		<RouterView class="RouterView"></RouterView>
	</div>
</template>

<script>
import { RouterView } from 'vue-router';

export default {
	name: 'App',
	components: { RouterView },
	data() {
		return {
			routes: [],
		};
	},

	created() {
		this.routes = this.$router.options.routes.filter(
			(route) => route.meta && route.meta.title
		);
		console.log(this.routes);
	},
	mounted() {
		// console.log(router);
	},
};
</script>

<style>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ul {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
html,
body {
	width: 100%;
	height: 100%;
}
</style>

<style scoped>
#app {
	width: 100%;
	height: 100%;
}

.app-nav {
	background-color: orange;
	padding: 10px 20px;
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
}

.RouterView {
	display: flex;
	flex-direction: column;
}

ul {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
}

li {
	padding: 10px 20px;
	border-radius: 5px;
	background-color: #fff;
}

li > * {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-size: 16px;
	color: #000;
}
</style>
